<template>
  <view
    v-if="showModal"
    :style="{ top: typeof top == 'number' ? `${top}rpx` : top }"
    style="position: fixed; left: 0; right: 0; bottom: 0; z-index: 99">
    <view
      @touchmove.stop.prevent
      style="background: #000; opacity: 0.6; width: 100%; height: 100%"
      @click="onCancel" />
    <slot></slot>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const props = defineProps({
    top: { type: [Number, String], default: 0 },
    maskClosable: { type: Boolean, default: true }
  })
  const emits = defineEmits(['cancel'])
  const showModal = ref(false)
  const show = () => {
    showModal.value = true
  }
  const hide = () => {
    showModal.value = false
  }
  const onCancel = () => {
    if (props.maskClosable) {
      hide()
      emits('cancel')
    }
  }
  defineExpose({ show, hide })
</script>

<style></style>
